<template>
  <div style="height: 100%">
    <el-container style="height: 100%">
      <el-aside width="sideWidth + 'px'" style="background-color: rgb(238, 241, 246); height: 100%">
        <el-menu router="" :style="{
                      height: '100%',
                      overflowX: 'hidden',
                      width: menuWidth + 'px',}"
                 background-color="#545c64"
                 text-color="#fff"
                 active-text-color="#ffd04b"
                 :collapse-transition="false"
                 :collapse="isCollapse">
          <div style="height: 60px; line-height: 60px; text-align: center">
            <img src="../assets/logo.png" style="
                width: 20px;
                position: relative;
                top: 5px;
                margin-right: 5px;
              " />
            <b style="color: white" v-show="logoTextShow">CEC后台管理系统</b>
          </div>

          <el-menu-item index="/admin/index/index-details">
            <i class="el-icon-house"></i>
            <span slot="title">首页</span>
          </el-menu-item>

          <!--            //导航2-->
          <el-submenu index="/admin/users">
            <template slot="title">
              <i class="el-icon-s-custom"></i>
              <span slot="title">用户管理</span>
            </template>
            <el-menu-item index="/admin/users/list">
              <i class="el-icon-user"></i>
              <span slot="title">用户列表</span>
            </el-menu-item>
            <el-menu-item index="/admin/users/roleManagement">
              <i class="el-icon-lock"></i>
              <span slot="title">角色管理</span>
            </el-menu-item>
          </el-submenu>

          <el-submenu index="/admin/admin">
            <template slot="title">
              <i class="el-icon-s-custom"></i>
              <span slot="title">管理员管理</span>
            </template>
            <el-menu-item index="/admin/admin/list">
              <i class="el-icon-user"></i>
              <span slot="title">管理员列表</span>
            </el-menu-item>

          </el-submenu>


          <!--            //导航3-->
          <el-submenu index="/admin/articles">
            <template slot="title">
              <i class="el-icon-document"></i>
              <span slot="title">文章管理</span>
            </template>
            <el-menu-item index="/admin/articles/articles-list">
              <i class="el-icon-document-copy"></i>
              <span slot="title">文章列表</span>
            </el-menu-item>
            <el-menu-item index="/admin/articles/category-management">
              <i class="el-icon-menu"></i>
              <span slot="title">分类管理</span>
            </el-menu-item>
          </el-submenu>
          <!--            //导航4-->
          <el-submenu index="/admin/messages">
            <template slot="title">
              <i class="el-icon-message"></i>
              <span slot="title">消息管理</span>
            </template>
            <el-menu-item index="/admin/messages/comment-management">
              <i class="el-icon-chat-dot-round"></i>
              <span slot="title">评论管理</span>
            </el-menu-item>
            <el-menu-item index="/admin/messages/guestbook-management">
              <i class="el-icon-chat-line-square"></i>
              <span slot="title">反馈管理</span>
            </el-menu-item>
          </el-submenu>

          <el-submenu index="/admin/elements">
            <template slot="title">
              <i class="el-icon-menu"></i>
              <span slot="title">前台元素管理</span>
            </template>
            <el-menu-item index="/admin/elements/carousel-management">
              <i class="el-icon-picture-outline"></i>
              <span slot="title">轮播图管理</span>
            </el-menu-item>
<!--            <el-menu-item index="/admin/elements/menubar-management">-->
<!--              <i class="el-icon-set-up"></i>-->
<!--              <span slot="title">导航栏管理</span>-->
<!--            </el-menu-item>-->
          </el-submenu>


          <!--   日志管理-->
          <el-submenu index="/admin/examine">
            <template slot="title">
              <i class="el-icon-s-order"></i>
              <span slot="title">审核管理</span>
            </template>
            <el-menu-item index="/admin/examine/examine-list">
              <i class="el-icon-postcard"></i>
              <span slot="title">审核列表</span>
            </el-menu-item>
          </el-submenu>


          <!-- 民族管理-->

          <el-submenu index="/admin/nation">
            <template slot="title">
              <i class="el-icon-s-order"></i>
              <span slot="title">民族管理</span>
            </template>
            <el-menu-item index="/admin/nation/list">
              <i class="el-icon-postcard"></i>
              <span slot="title">民族列表</span>
            </el-menu-item>
            <el-menu-item index="/admin/nation/detail">
              <i class="el-icon-postcard"></i>
              <span slot="title">民族详情</span>
            </el-menu-item>
          </el-submenu>


          <el-menu-item index="/admin/person/personal-center">
            <i class="el-icon-user-solid"></i>
            <span slot="title">个人中心</span>
          </el-menu-item>

        </el-menu>
      </el-aside>

      <el-container>
        <el-header style="
            font-size: 12px;
            border-bottom: 1px solid #ccc;
            display: flex;
            background-color: white;
            position: relative;
          ">
          <div style="font-size: 20px; width: 50px">
            <!--            收缩导航-->
            <span :class="collapseBtnClass" style="cursor: pointer" @click="collapse"></span>
          </div>

          <!--        面包屑-->
          <div style="display: flex; align-items: center">
            <el-breadcrumb separator-class="el-icon-arrow-right">
              <el-breadcrumb-item :to="{ path: item.path }" v-for="item in breadcrumbList" :key="item.path"
                                  replace:true>
                {{ item.meta.title }}
              </el-breadcrumb-item>
            </el-breadcrumb>
          </div>

          <!--  cursor: pointer变鼠标        -->

          <el-dropdown style="
              cursor: pointer;
              position: absolute;
              right: 20px;
            ">
            <span style="font-size: 16px; margin-right: 15px">{{name}}
              <i class="el-icon-arrow-down" style="margin-left: 5px"> </i>
            </span>
            <span>
              <el-avatar :src="avatar"
                         style="vertical-align:middle"></el-avatar>

            </span>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item>
                <el-link @click="layout()">退出</el-link>
              </el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
        </el-header>

        <el-main style="padding: 0 20px">
          <router-view />
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>



<script>
export default {
  data() {
    return {
      avatar:"",
      collapseBtnClass: "el-icon-s-fold",
      isCollapse: false,
      sideWidth: 200, //左边栏宽度
      logoTextShow: true,
      menuWidth: 200,
      headerBg: "headerBg",
      name:"",
      role:'',
    };
  },

  /*每次都会计算*/
  computed: {
    breadcrumbList() {
      return this.$route.matched;
    },
  },

  created() {
    console.log(this.$route.matched);
    this.axios.get("/admin/personal").then(({data}) => {
      console.log("用户信息: ",data);
      if(data.state == 20000){

        this.name = data.data.name;
        this.avatar = data.data.avatar;
        this.role = data.data.role;
      }else{
        this.$message.error(data.message);
      }

    });
  },
  methods: {
    collapse() {
      //导航栏收缩
      this.isCollapse = !this.isCollapse; //默认值为false
      if (this.isCollapse) {
        this.sideWidth = 64; //.el-menu--collapse 的宽度为64
        this.collapseBtnClass = "el-icon-s-unfold";
        this.logoTextShow = false;
        this.menuWidth = 64;
      } else {
        this.sideWidth = 200;
        this.collapseBtnClass = "el-icon-s-fold";
        this.logoTextShow = true;
        this.menuWidth = 200;
      }
    },
    layout(){
      window.localStorage.removeItem("cecAdminToken");
      console.log("退出");
      this.$router.push("/")
    }
  },
};
</script>
<style>
::-webkit-scrollbar {
  width: 10px;
  height: 5px;
  position: absolute;
}

::-webkit-scrollbar-thumb {
  background-color: rgb(84, 92, 110)
}

::-webkit-scrollbar-track {
  background-color: #ddd
}

.el-header {
  background-color: #b3c0d1;
  color: #333;
  line-height: 60px;
}

.el-aside {
  color: #333;
}

.headerBg {
  background: #eee !important;
}
</style>